.codepen-wrapper[data-codepen-id="xksLB"] html {
line-height: 1;
}

.codepen-wrapper[data-codepen-id="xksLB"] * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}

.codepen-wrapper[data-codepen-id="xksLB"] #wrapper {
text-align: center;
margin-top: 40px;
}

.codepen-wrapper[data-codepen-id="xksLB"] #eric {
position: relative;
display: inline-block;
height: 190px;
width: 185px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric:after {
content: " ";
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 20px;
left: 71px;
width: 35px;
height: 13px;
background: #f0e50c;
z-index: 99;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 24px;
left: 26px;
width: 132px;
height: 106px;
overflow: hidden;
background: #f0d5ab;
z-index: 15;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .hat {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 132px;
height: 78px;
background: #49c2b5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .hat:before {
content: " ";
-webkit-border-radius: 65% 40%;
-moz-border-radius: 65% 40%;
-ms-border-radius: 65% 40%;
-o-border-radius: 65% 40%;
border-radius: 65% 40%;
position: absolute;
top: 25px;
left: -3px;
width: 134px;
height: 48px;
background: #f0e50c;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .hat:after {
content: " ";
-webkit-border-radius: 65% 40%;
-moz-border-radius: 65% 40%;
-ms-border-radius: 65% 40%;
-o-border-radius: 65% 40%;
border-radius: 65% 40%;
position: absolute;
top: 29px;
left: -6px;
width: 137px;
height: 52px;
background: #f0d5ab;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .eye-left, .codepen-wrapper[data-codepen-id="xksLB"] #eric .face .eye-right {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
position: absolute;
top: 35px;
left: 36px;
width: 32px;
height: 37px;
background: #ffffff;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .eye-left:after, .codepen-wrapper[data-codepen-id="xksLB"] #eric .face .eye-right:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: 16px;
left: 26px;
height: 3px;
width: 3px;
background: #000000;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .eye-right {
-webkit-border-radius: 50% 65%;
-moz-border-radius: 50% 65%;
-ms-border-radius: 50% 65%;
-o-border-radius: 50% 65%;
border-radius: 50% 65%;
left: 69px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .face .smile {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
-webkit-box-shadow: 0 1px 0 black;
-moz-box-shadow: 0 1px 0 black;
box-shadow: 0 1px 0 black;
position: absolute;
top: 79px;
left: 64px;
width: 15px;
height: 8px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body {
-webkit-border-radius: 50% 50% 33% 33%;
-moz-border-radius: 50% 50% 33% 33%;
-ms-border-radius: 50% 50% 33% 33%;
-o-border-radius: 50% 50% 33% 33%;
border-radius: 50% 50% 33% 33%;
position: absolute;
top: 80px;
left: 13px;
height: 90px;
width: 160px;
background: #c60735;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .zipper {
position: absolute;
top: 48px;
left: 86px;
width: 1px;
height: 42px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .button-1, .codepen-wrapper[data-codepen-id="xksLB"] #eric .body .button-2, .codepen-wrapper[data-codepen-id="xksLB"] #eric .body .button-3 {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 50px;
left: 82px;
height: 4px;
width: 2px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .button-2 {
top: 67px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .button-3 {
top: 82px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .hand-left {
-webkit-border-radius: 60% 160% 50% 100%;
-moz-border-radius: 60% 160% 50% 100%;
-ms-border-radius: 60% 160% 50% 100%;
-o-border-radius: 60% 160% 50% 100%;
border-radius: 60% 160% 50% 100%;
position: absolute;
top: 38px;
left: -11px;
width: 29px;
height: 22px;
background: #ede40b;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .hand-right {
-webkit-border-radius: 60% 50% 50% 70%;
-moz-border-radius: 60% 50% 50% 70%;
-ms-border-radius: 60% 50% 50% 70%;
-o-border-radius: 60% 50% 50% 70%;
border-radius: 60% 50% 50% 70%;
position: absolute;
top: 35px;
left: 140px;
width: 29px;
height: 25px;
background: #ede40b;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .body .hand-right:before {
-webkit-border-radius: 100% 28%;
-moz-border-radius: 100% 28%;
-ms-border-radius: 100% 28%;
-o-border-radius: 100% 28%;
border-radius: 100% 28%;
content: " ";
position: absolute;
top: 5px;
left: -5px;
width: 29px;
height: 18px;
background: #ede40b;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .legs {
-webkit-border-radius: 0 0 10px 10px/37px;
-moz-border-radius: 0 0 10px 10px/37px;
-ms-border-radius: 0 0 10px 10px/37px;
-o-border-radius: 0 0 10px 10px/37px;
border-radius: 0 0 10px 10px/37px;
position: absolute;
left: 22px;
top: 154px;
width: 140px;
height: 23px;
background: #623919;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .legs .foot-left, .codepen-wrapper[data-codepen-id="xksLB"] #eric .legs .foot-right {
-webkit-border-radius: 50% 50% 0 0/7px;
-moz-border-radius: 50% 50% 0 0/7px;
-ms-border-radius: 50% 50% 0 0/7px;
-o-border-radius: 50% 50% 0 0/7px;
border-radius: 50% 50% 0 0/7px;
position: absolute;
top: 18px;
left: 2px;
width: 70px;
height: 8px;
background: #21241e;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #eric .legs .foot-right {
left: 69px;
}

.codepen-wrapper[data-codepen-id="xksLB"] #stan {
position: relative;
display: inline-block;
height: 190px;
width: 125px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan:after {
content: " ";
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 7px;
left: 48px;
width: 24px;
height: 23px;
background: #be032b;
z-index: 99;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 18px;
left: 6px;
width: 110px;
height: 112px;
overflow: hidden;
background: #f0d5ab;
z-index: 15;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .hat {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 78px;
background: #4a6398;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .hat:before {
content: " ";
-webkit-border-radius: 50% 70%;
-moz-border-radius: 50% 70%;
-ms-border-radius: 50% 70%;
-o-border-radius: 50% 70%;
border-radius: 50% 70%;
position: absolute;
top: 32px;
left: -3px;
width: 134px;
height: 48px;
background: #be032b;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .hat:after {
content: " ";
-webkit-border-radius: 50% 70%;
-moz-border-radius: 50% 70%;
-ms-border-radius: 50% 70%;
-o-border-radius: 50% 70%;
border-radius: 50% 70%;
position: absolute;
top: 43px;
left: -6px;
width: 137px;
height: 42px;
background: #f0d5ab;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .eye-left, .codepen-wrapper[data-codepen-id="xksLB"] #stan .face .eye-right {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
position: absolute;
top: 45px;
left: 26px;
width: 31px;
height: 36px;
background: #ffffff;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .eye-left:after, .codepen-wrapper[data-codepen-id="xksLB"] #stan .face .eye-right:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: 16px;
left: 23px;
height: 3px;
width: 3px;
background: #000000;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .eye-right {
-webkit-border-radius: 50% 65%;
-moz-border-radius: 50% 65%;
-ms-border-radius: 50% 65%;
-o-border-radius: 50% 65%;
border-radius: 50% 65%;
left: 58px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .face .smile {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
-webkit-box-shadow: 0 1px 0 black;
-moz-box-shadow: 0 1px 0 black;
box-shadow: 0 1px 0 black;
position: absolute;
top: 89px;
left: 48px;
width: 18px;
height: 8px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body {
-webkit-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-moz-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-ms-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-o-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
position: absolute;
top: 99px;
left: 10px;
height: 70px;
width: 100px;
background: #905947;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .zipper {
position: absolute;
top: 27px;
left: 49px;
width: 1px;
height: 42px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .button-1, .codepen-wrapper[data-codepen-id="xksLB"] #stan .body .button-2, .codepen-wrapper[data-codepen-id="xksLB"] #stan .body .button-3 {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 37px;
left: 44px;
height: 4px;
width: 2px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .button-2 {
top: 51px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .button-3 {
top: 62px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .hand-left {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 42px;
left: -6px;
width: 20px;
height: 20px;
background: #c00531;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .hand-left:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
left: 11px;
top: 3px;
height: 6px;
width: 6px;
border: solid 1px #5c0011;
background: #c00531;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .hand-right {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 45px;
left: 83px;
width: 20px;
height: 20px;
background: #c00531;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .body .hand-right:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
left: 2px;
top: 3px;
height: 6px;
width: 6px;
border: solid 1px #5c0011;
background: #c00531;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .legs {
-webkit-border-radius: 44px 44px 0 0;
-moz-border-radius: 44px 44px 0 0;
-ms-border-radius: 44px 44px 0 0;
-o-border-radius: 44px 44px 0 0;
border-radius: 44px 44px 0 0;
position: absolute;
left: 22px;
top: 154px;
width: 80px;
height: 25px;
background: #4a6398;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .legs .foot-left, .codepen-wrapper[data-codepen-id="xksLB"] #stan .legs .foot-right {
-webkit-border-radius: 50% 50% 0 0/7px;
-moz-border-radius: 50% 50% 0 0/7px;
-ms-border-radius: 50% 50% 0 0/7px;
-o-border-radius: 50% 50% 0 0/7px;
border-radius: 50% 50% 0 0/7px;
position: absolute;
top: 21px;
left: -8px;
width: 48px;
height: 5px;
background: #21241e;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #stan .legs .foot-right {
left: 36px;
}

.codepen-wrapper[data-codepen-id="xksLB"] #kenny {
position: relative;
display: inline-block;
height: 190px;
width: 125px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 23px;
left: 5px;
width: 115px;
height: 116px;
background: #f0d5ab;
z-index: 15;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .hat {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: 0 1px 0 #8d370a;
-moz-box-shadow: 0 1px 0 #8d370a;
box-shadow: 0 1px 0 #8d370a;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: solid 26px #ed5c10;
border-left-width: 23px;
border-right-width: 23px;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: 25px;
left: 0;
right: -30px;
bottom: 25px;
border-left: solid 34px #653c1a;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: 25px;
left: -30px;
right: 0;
bottom: 25px;
border-right: solid 34px #653c1a;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .eye-left, .codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .eye-right {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
position: absolute;
top: 41px;
left: 26px;
width: 31px;
height: 36px;
background: #ffffff;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .eye-left:after, .codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .eye-right:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: 14px;
left: 19px;
height: 3px;
width: 3px;
background: #000000;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .eye-right {
-webkit-border-radius: 50% 65%;
-moz-border-radius: 50% 65%;
-ms-border-radius: 50% 65%;
-o-border-radius: 50% 65%;
border-radius: 50% 65%;
left: 58px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .eye-right:after {
top: 14px;
left: 7px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .lace {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 26px;
left: 17px;
right: 18px;
bottom: 17px;
border: solid 1px #653c1a;
z-index: 15;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .lace:before {
-webkit-border-radius: 0% 0% 100% 0%;
-moz-border-radius: 0% 0% 100% 0%;
-ms-border-radius: 0% 0% 100% 0%;
-o-border-radius: 0% 0% 100% 0%;
border-radius: 0% 0% 100% 0%;
-webkit-box-shadow: 1px 1px 0 #653c1a;
-moz-box-shadow: 1px 1px 0 #653c1a;
box-shadow: 1px 1px 0 #653c1a;
content: " ";
position: absolute;
top: 61px;
left: 31px;
width: 6px;
height: 19px;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .face .lace:after {
-webkit-border-radius: 0% 0% 0% 100%;
-moz-border-radius: 0% 0% 0% 100%;
-ms-border-radius: 0% 0% 0% 100%;
-o-border-radius: 0% 0% 0% 100%;
border-radius: 0% 0% 0% 100%;
-webkit-box-shadow: -1px 1px 0 #653c1a;
-moz-box-shadow: -1px 1px 0 #653c1a;
box-shadow: -1px 1px 0 #653c1a;
content: " ";
position: absolute;
top: 61px;
left: 41px;
width: 5px;
height: 20px;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .body {
-webkit-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-moz-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-ms-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-o-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-webkit-box-shadow: 0 1px 0 #8d370a;
-moz-box-shadow: 0 1px 0 #8d370a;
box-shadow: 0 1px 0 #8d370a;
position: absolute;
top: 115px;
left: 10px;
height: 56px;
width: 100px;
background: #ec5b0f;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .body .zipper {
position: absolute;
top: 14px;
left: 53px;
width: 1px;
height: 42px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .body .hand-left {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 32px;
left: -2px;
width: 20px;
height: 20px;
background: #673e1e;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .body .hand-left:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
left: 11px;
top: 3px;
height: 6px;
width: 6px;
border: solid 1px #5c0011;
background: #673e1e;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .body .hand-right {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 33px;
left: 87px;
width: 20px;
height: 20px;
background: #673e1e;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .body .hand-right:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
left: 2px;
top: 3px;
height: 6px;
width: 6px;
border: solid 1px #5c0011;
background: #673e1e;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .legs {
-webkit-border-radius: 44px 44px 0 0;
-moz-border-radius: 44px 44px 0 0;
-ms-border-radius: 44px 44px 0 0;
-o-border-radius: 44px 44px 0 0;
border-radius: 44px 44px 0 0;
position: absolute;
left: 22px;
top: 154px;
width: 80px;
height: 25px;
background: #ec5b0f;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .legs .foot-left, .codepen-wrapper[data-codepen-id="xksLB"] #kenny .legs .foot-right {
-webkit-border-radius: 50% 50% 0 0/7px;
-moz-border-radius: 50% 50% 0 0/7px;
-ms-border-radius: 50% 50% 0 0/7px;
-o-border-radius: 50% 50% 0 0/7px;
border-radius: 50% 50% 0 0/7px;
position: absolute;
top: 21px;
left: -8px;
width: 48px;
height: 5px;
background: #21241e;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kenny .legs .foot-right {
left: 36px;
}

.codepen-wrapper[data-codepen-id="xksLB"] #kyle {
position: relative;
display: inline-block;
height: 190px;
width: 140px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 18px;
left: 15px;
width: 110px;
height: 110px;
background: #f0d5ab;
z-index: 15;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .hat {
-webkit-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
-ms-border-radius: 10px 10px 0 0;
-o-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
position: absolute;
top: -3px;
left: 4px;
width: 104px;
height: 47px;
border: solid 10px #5be219;
border-top-width: 18px;
border-bottom-width: 0;
background: #25b832;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .hat:before {
-webkit-border-radius: 300% 70%;
-moz-border-radius: 300% 70%;
-ms-border-radius: 300% 70%;
-o-border-radius: 300% 70%;
border-radius: 300% 70%;
-webkit-box-shadow: 0 -1px 0 #25b832;
-moz-box-shadow: 0 -1px 0 #25b832;
box-shadow: 0 -1px 0 #25b832;
content: " ";
position: absolute;
top: 17px;
left: -26px;
width: 24px;
height: 50px;
background: #5be219;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .hat:after {
-webkit-border-radius: 70% 300%;
-moz-border-radius: 70% 300%;
-ms-border-radius: 70% 300%;
-o-border-radius: 70% 300%;
border-radius: 70% 300%;
-webkit-box-shadow: 0 -1px 0 #25b832;
-moz-box-shadow: 0 -1px 0 #25b832;
box-shadow: 0 -1px 0 #25b832;
content: " ";
position: absolute;
top: 24px;
left: 84px;
width: 24px;
height: 50px;
background: #5be219;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .eye-left, .codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .eye-right {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
position: absolute;
top: 40px;
left: 22px;
width: 32px;
height: 37px;
background: #ffffff;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .eye-left:after, .codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .eye-right:after {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: 18px;
left: 26px;
height: 3px;
width: 3px;
background: #000000;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .eye-right {
-webkit-border-radius: 50% 65%;
-moz-border-radius: 50% 65%;
-ms-border-radius: 50% 65%;
-o-border-radius: 50% 65%;
border-radius: 50% 65%;
left: 55px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .face .smile {
-webkit-border-radius: 65% 50%;
-moz-border-radius: 65% 50%;
-ms-border-radius: 65% 50%;
-o-border-radius: 65% 50%;
border-radius: 65% 50%;
-webkit-box-shadow: 0 1px 0 black;
-moz-box-shadow: 0 1px 0 black;
box-shadow: 0 1px 0 black;
position: absolute;
top: 87px;
left: 47px;
width: 15px;
height: 8px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body {
-webkit-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-moz-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-ms-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
-o-border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
border-radius: 50% 50% 33% 33%/100px 100px 17px 17px;
position: absolute;
top: 98px;
left: 19px;
height: 72px;
width: 100px;
background: #eb5a10;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
top: -10px;
left: 12px;
width: 78px;
height: 31px;
border-bottom: solid 13px #54db10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .zipper {
position: absolute;
top: 27px;
left: 49px;
width: 1px;
height: 42px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .button-1, .codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .button-2, .codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .button-3 {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 37px;
left: 44px;
height: 4px;
width: 2px;
background: #5c0011;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .button-2 {
top: 51px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .button-3 {
top: 62px;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .hand-left {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 42px;
left: -6px;
width: 20px;
height: 20px;
background: #54db10;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .hand-left:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
left: 11px;
top: 3px;
height: 6px;
width: 6px;
border: solid 1px #5c0011;
background: #54db10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .hand-right {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 45px;
left: 83px;
width: 20px;
height: 20px;
background: #54db10;
z-index: 10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .body .hand-right:before {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: " ";
position: absolute;
left: 2px;
top: 3px;
height: 6px;
width: 6px;
border: solid 1px #5c0011;
background: #54db10;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .legs {
-webkit-border-radius: 44px 44px 0 0;
-moz-border-radius: 44px 44px 0 0;
-ms-border-radius: 44px 44px 0 0;
-o-border-radius: 44px 44px 0 0;
border-radius: 44px 44px 0 0;
position: absolute;
left: 32px;
top: 154px;
width: 75px;
height: 25px;
background: #326b53;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .legs .foot-left, .codepen-wrapper[data-codepen-id="xksLB"] #kyle .legs .foot-right {
-webkit-border-radius: 50% 50% 0 0/7px;
-moz-border-radius: 50% 50% 0 0/7px;
-ms-border-radius: 50% 50% 0 0/7px;
-o-border-radius: 50% 50% 0 0/7px;
border-radius: 50% 50% 0 0/7px;
position: absolute;
top: 21px;
left: -5px;
width: 45px;
height: 5px;
background: #21241e;
z-index: 5;
}
.codepen-wrapper[data-codepen-id="xksLB"] #kyle .legs .foot-right {
left: 33px;
}